<template>
  <div>
    <hr>
    <div v-for="n in 12" class="color" :style="{ backgroundColor: getColor(n) }">你看我会变颜色</div>
    <hr>
  </div>
</template>

<script setup>
const getColor = (n) => {
  return `hsl(${(n - 1) * 30},100%,75%)`
}
</script>

<style scoped>

</style>